<template>
    <div class="app-container home">
        <h2>欢迎登录房屋补贴后台管理系统</h2>
        <div class="topStatistics">
            <div class="itemBox" :class="'bg'+item.type" v-for="(item,index) in houseType" :key="index">
                <div>{{item.name}}</div>
                <div>{{item.count}}</div>
            </div>
        </div>
        <div class="chartBox">
            <div id="myChart" ref="myChart" style="width: 49%;height:480px;"></div>
            <div id="myChart2" ref="myChart2" style="width: 49%;height:480px;"></div>
        </div>
    </div>
</template>
  
  <script>

import { staticCountByType, staticCountByAuditStatus, staticCountByMoth, } from "@/api/house/info";
export default {
    name: "Index",
    data() {
        return {
            // 版本号
            version: "3.8.5",
            houseType: [
                {
                    type: '0',
                    name: '房屋改造',
                    count: 0
                },
                {
                    type: '1',
                    name: '原址新建房屋',
                    count: 0
                },
                {
                    type: '2',
                    name: '异地新建房屋',
                    count: 0
                },
                {
                    type: '3',
                    name: '房屋拆除',
                    count: 0
                },
                {
                    type: '4',
                    name: '楼房新建',
                    count: 0
                },
            ],
            status: [
                {
                    type: '0',
                    name: '未申请',
                    count: 0
                },
                {
                    type: '1',
                    name: '申请改造',
                    count: 0
                },
                {
                    type: '2',
                    name: '预核准',
                    count: 0
                },
                {
                    type: '3',
                    name: '核准',
                    count: 0
                },
                {
                    type: '4',
                    name: '改造',
                    count: 0
                },
                {
                    type: '5',
                    name: '申请验收',
                    count: 0
                },
                {
                    type: '6',
                    name: '验收',
                    count: 0
                },
                {
                    type: '7',
                    name: '补贴',
                    count: 0
                },
            ]
        };
    },
    created() {
        //         根据房屋类型统计数量
        // GET http://localhost:4444/system/info/staticCountByType
        // 根据流程节点统计数量
        // GET http://localhost:4444/system/info/staticCountByAuditStatus
        // 根据月度节点统计数量
        // GET http://localhost:4444/system/info/staticCountByMoth

        this.setStaticCountByTypeM()
        this.setStaticCountByAuditStatusM()
        this.setStaticCountByMothM()
    },
    methods: {
        goTarget(href) {
            window.open(href, "_blank");
        },
        setStaticCountByTypeM() {
            staticCountByType().then(res => {
                this.houseType.map(item => {
                    for (var i in res.data) {
                        if (res.data[i].type == item.type) {
                            item.count = res.data[i].count
                        }
                    }
                })
            });
        },
        setStaticCountByAuditStatusM() {
            staticCountByAuditStatus().then(res => {
                this.status.map(item => {
                    for (var i in res.data) {
                        if (res.data[i].type == item.type) {
                            item.count = res.data[i].count
                        }
                    }
                })
                let xAxisList = []
                let dataList = []
                for (var i in this.status) {
                    xAxisList.push(this.status[i].name)
                    dataList.push(this.status[i].count)
                }
                let myChart = this.$echarts.init(document.getElementById("myChart"));
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        data: xAxisList,
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#999',
                            fontSize: 14
                        }
                    },
                    yAxis: {
                        // name: "（人）",
                        nameTextStyle: {
                            color: '#999',
                            fontSize: 16
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        axisLabel: {
                            color: '#999',
                            fontSize: 16
                        },
                        splitLine: {
                            show: false,
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },
                        interval: 500,
                        // max: 5000

                    },
                    series: [{
                        type: 'bar',
                        barWidth: 18,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00b0ff'
                                }, {
                                    offset: 0.8,
                                    color: '#7052f4'
                                }], false)
                            }
                        },
                        data: dataList
                    }]
                }
                myChart.setOption(option);
            });
        },
        setStaticCountByMothM() {
            staticCountByMoth().then(res => {
                let xAxisList = []
                let dataList = []
                for (var i in res.data) {
                    xAxisList.push(res.data[i].type)
                    dataList.push(res.data[i].count)
                }
                let myChart = this.$echarts.init(document.getElementById("myChart2"));
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: [{
                        type: 'category',
                        data: xAxisList,
                        axisLine: {
                            lineStyle: {
                                color: "#999"
                            },
                        }, 
                        axisLabel: {
                            interval: 0,
                            // rotate:40,
                        }

                    }],
                    yAxis: [{
                        type: 'value',
                        splitNumber: 4,
                        splitLine: {
                            lineStyle: {
                                type: 'dashed',
                                color: '#DDD'
                            }
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "#333"
                            },
                        },
                        nameTextStyle: {
                            color: "#999"
                        },
                        splitArea: {
                            show: false
                        }
                    }],
                    series: [{
                        // name: '课时',
                        type: 'line',
                        data: dataList,
                        lineStyle: {
                            normal: {
                                width: 8,
                                color: {
                                    type: 'linear',

                                    colorStops: [{
                                        offset: 0,
                                        color: '#A9F387' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#48D8BF' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                shadowColor: 'rgba(72,216,191, 0.3)',
                                shadowBlur: 10,
                                shadowOffsetY: 20
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#fff',
                                borderWidth: 10,
                                /*shadowColor: 'rgba(72,216,191, 0.3)',
                                shadowBlur: 100,*/
                                borderColor: "#A9F387"
                            }
                        },
                        smooth: true
                    }]
                }
                myChart.setOption(option);
            });
        }
    }
};
  </script>
  
  <style scoped lang="scss">
.home {
    blockquote {
        padding: 10px 20px;
        margin: 0 0 20px;
        font-size: 17.5px;
        border-left: 5px solid #eee;
    }
    hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #eee;
    }
    .col-item {
        margin-bottom: 20px;
    }

    ul {
        padding: 0;
        margin: 0;
    }

    font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
        list-style-type: none;
    }

    h4 {
        margin-top: 0px;
    }

    h2 {
        margin-top: 10px;
        font-size: 36px;
        font-weight: 100;
        text-align: center;
    }

    p {
        margin-top: 10px;

        b {
            font-weight: 700;
        }
    }

    .update-log {
        ol {
            display: block;
            list-style-type: decimal;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0;
            margin-inline-end: 0;
            padding-inline-start: 40px;
        }
    }
    .topStatistics {
        width: 100%;
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        .itemBox {
            width: 18%;
            background-color: aquamarine;
            border-radius: 5px;
            padding: 30px;
            color: #fff;
            font-weight: 600;
            font-size: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .bg0 {
            background-image: linear-gradient(#eac2a4, #ec6637);
        }
        .bg1 {
            background-image: linear-gradient(#c593e8, #725cef);
        }
        .bg2 {
            background-image: linear-gradient(#75dcb5, #298e72);
        }
        .bg3 {
            background-image: linear-gradient(#86e0f0, #3aacc5);
        }
        .bg4 {
            background-image: linear-gradient(#6ec1ee, #6f83ea);
        }
    }
    .chartBox {
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        div {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 1px 4px rgba(0, 21, 41, 0.2);
        }
    }
}
</style>
  
  